<script>
    $(function(){
        var vue = new Vue({
            el:'#accordion',
            data:{
                param:{stuId:0},
                powers : admin.powers,
                parents : []
            },
            methods : {
                gmenu : function(){
                    console.log(admin.powers)
                    var that = this;
                    $.each(that.powers,function(i,p){
                        if(p.pid==0){
                            that.parents.push(p);
                        }
                    })
                }
            }
        })
        vue.gmenu();
    })
</script>

<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/assets/css/custom.css">
<script src="css/assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="css/assets/js/custom.js"></script>

<div class="page-wrapper" style="margin-top: 40px;">
    <nav id="sidebar" class="sidebar-wrapper" style="margin-top: 80px;">
        <div class="sidebar-content">
            <!--<a href="#" id="toggle-sidebar"><i class="fa fa-bars"></i></a>-->
            <div class="sidebar-brand">
                <a href="#">梳碧湖驾校预约管理系统</a>
            </div>
            <div class="sidebar-header">
                <!--<div class="user-pic">
                    <img class="img-responsive img-rounded" src="assets/img/user.jpg" alt="">
                </div>-->
                <div class="user-info">

                </div>
            </div><!-- sidebar-header  -->
            <div class="sidebar-menu">
                <ul>
                    <li class="sidebar-dropdown" id="accordion" role="tablist" aria-multiselectable="true">
                        <!--<a role="button" href="index.html">-->
                            <!--<i class="glyphicon glyphicon-home"></i> 首页-->
                        <!--</a>-->
                        <ul  v-for="(p,index) in parents">
                            <li class="sidebar-dropdown">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" :href="'#collapse'+index" aria-expanded="true" :aria-controls="'collapse'+index">
                                    <i :class="p.icon"></i> {{p.pname}}
                                </a>
                                <div :id="'collapse'+index" class="panel-collapse collapse" role="tabpanel" :aria-labelledby="'heading'+index">
                                    <p v-for="s in powers" v-if="s.pid==p.id">
                                        <a :href="s.url">
                                            <i :class="s.icon"></i> {{s.pname}}
                                        </a>
                                    </p>
                                </div>
                            </li>
                        </ul >
                    </li>
                </ul>
            </div><!-- sidebar-menu  -->
        </div><!-- sidebar-content  -->
    </nav><!-- sidebar-wrapper  -->

</div><!-- page-wrapper -->


